<template>
	<view>
		<view class="income">
			<z-paging ref="paging" v-model="dataList" @query="queryList">
                
				<template #top>
					<view class="container-head">
						<u-search placeholder="请输入负责人姓名" v-model.lazy="machineDto.head_name" height="70" @search="searchStore" 
						@custom="searchStore">
						</u-search>
					</view>
				</template>
				<view class="income-centent">
					<view class="income-centent-card" v-for="(item, index) of dataList" :key="index" 
					 @click="forceRestart(item)">
						<view class="income-centent-card-title">
						 <view>店名: {{ item.device_name }}</view>	
						</view>
						<view class="income-centent-card-title">
						 <view>设备ID: {{ item.device_id }}</view>	
						</view>
						<view class="income-centent-card-title">
						 <view>设备状态: {{ item.status ? '使用中' : '空闲' }}</view>	
						</view>
						<view class="income-centent-card-main">
							<view>负责人: {{ item.head_name }}</view>
							<view>姓名: {{ item.phone }}</view>
						</view>
						<view class="income-centent-card-addr">
						 <view>地址: {{ item.address }}</view>	
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import request from "@/api/request.js"
	export default {
		data() {
			return {
				dataList: [],
				machineDto: {
					token: '',
					page: 1,
					page_size: 10,
					head_name: ''
				},
			}
		},
		onLoad() {
			this.machineDto.token = uni.getStorageSync('token')
		},
		computed: {},
		methods: {
			searchStore(){
			  this.$refs.paging.reload()
			},
			queryList(page, page_size) {
				uni.showLoading({
					title: '加载中...'
				})
				const that = this
				this.machineDto.page = page
				this.machineDto.page_size = page_size
				request({
					url: "/kx/FaultManagement/getDeviceList",
					method: "POST",
					data: this.machineDto,
					successCb(res) {
						console.log(res, '11')
						uni.hideLoading()
						const temp = res.data || []
						that.$refs.paging.complete(temp.data);
					},
					failCb(res) {
						uni.hideLoading()
						that.$refs.paging.complete(false);
					}
				})
			},
			forceRestart(item){
			  if(!item.status){
				 uni.$u.toast('当前设备空闲中!')
				 return 
			  }
			  const that = this
			  uni.showModal({
			  	title: '温馨提示',
				content: '是否重启设备',
				success({ confirm }) {
				  if(confirm){
				    request({
				    	url: "/kx/FaultManagement/forceRestart",
				    	method: "POST",
				    	data:{
						  device_id: item.device_id,
						  token: that.machineDto.token
						} ,
				    	successCb(res) {
				    	 uni.hideLoading()
				         uni.$u.toast(res.message)
				    	},
				    	failCb(res) {
				    		uni.hideLoading()
                            uni.$u.toast('系统繁忙')
				    	}
				    }) 
				  }   	
				}
			  })	
			}
		}
	}
</script>

<style lang="scss">
	.container-head {
		width: 100%;
		padding: 20rpx 0 20rpx 0;
		background: #ffffff;
	}
	.income {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 36rpx;
		width: 100%;
		min-height: 100vh;
		background-color: #f6f6f6;


		&-centent {
			margin: 24rpx 0;

			&-card {
				width: 680rpx;
				background: $uni-bg-color;
				border-radius: 20rpx;
				margin: 12rpx auto;
                padding-bottom: 20rpx;
				&-title {
					padding: 10rpx 30rpx;
					font-size: 30rpx;
				}
                &-addr {
				  font-size: 24rpx;
				  padding: 0 30rpx;
				  line-height: 1.5;
				}
				&-main {
					@include layout(space-between, center);
					padding: 5rpx 30rpx;
					font-size: 28rpx;

				}
			}
		}
	}
</style>